<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <!-- 什么是指令及其作用：指令的职责时，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM -->
    <!-- 什么时候使用插值语法，什么时候使用指令语法
         1，凡是标签体当中的内容要想动态，需要使用插值语法
         2，只要相让HTML标签的属性动态，需要使用指令语法
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- v-once 指令：作用，只渲染元素一次，随后重新渲染，
            元素及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新 -->
        <h1 v-once>{{msg}}</h1>



        <!-- v-if="表达式"指令
        作用：表达式执行结果需要一个布尔类型的数据：true或者false
        true：这个指令所在的标签，会被渲染到浏览器当中
        false：这个指令所在的标签，不会渲染到浏览器当中 -->
        <h1 v-if="a>b">v-if测试：{{msg}}</h1>


        <!-- v-bind指令详解 
        它可以让HTML标签的某个属性的值产生动态的效果
        1，在编译的时候v-bind后面的“参数值”会被编译为HTML标签的属性名
        2，表达式会关联data，当data发生改变之后，表达式的执行结果会发生变化
        -->
        <h1 v-bind:name="msg"></h1>
        <!-- 带有单引号的时常量 -->
        <h1 v-bind:name="1 + 1"></h1>

        <img src="./img/头像.jpg" alt="">
        <img :src="imgPath">

        <!-- 3,v-bind 简写 ： -->
        <img :src="imgPath">
        <!-- 文本框动态输入绑定 -->
        <input :type="type" :value="username">
        <a :href="url">跳转</a>

    </div>
    <script src="./js/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'cyh',
                a: 10,
                b: 9,
                imgPath: './img/preview.jpg',
                username: 'cyh',
                type: 'password',
                url: 'https://www.baidu.com'
            }
        })
    </script>
</body>

</html>